<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>斑马线</title>
	<style type="text/css">
		ul{
			list-style: none;
		}
	</style>
</head>
<body>


  <ul id="news">
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
		<li>item5</li>
	</ul>

	<script>
     /*   var lis = document.querySelectorAll('li');
        console.log(lis);
        for(var i = 0; i < lis.length; i++) {
        	lis[i].onmouseover = function() {
        		this.style.backgroundColor = 'red';
        	}
        	lis[i].index = i;
        	lis[i].onmouseover = function() {
        		if(this.index % 2 == 0) {
        			this.style.backgroundColor = 'pink';
        		}else {
        			this.style.backgroundColor = '';
        		}
        	}
        		if(i % 2 == 0) {
        			lis[i].style.backgroundColor = 'pink';
        		}
        }*/
        	var lis = document.querySelectorAll('li')
		console.log(lis)
		for(var i = 0; i < lis.length; i++) {
			// 设置动态斑马线
			lis[i].onmouseover = function() {	
				this.style.backgroundColor = 'red'
			}
			lis[i].index = i // 设置当前li的属性index = i
			lis[i].onmouseout = function() {
				// 这里this.index 获取到上面赋值的 index = i 
				if(this.index % 2 == 0) {
					this.style.backgroundColor = 'pink'
				}else {
					this.style.backgroundColor = ''
				}
			}
			// 设置静态斑马线
			if(i % 2 == 0) {
				lis[i].style.backgroundColor = 'pink'
			}
		}
	</script>
</body>
</html>